23. Redux-thunk中间件

Redux-thunk中间件

安装

npm install –save redux-thunk

使用

import { createStore, applyMiddleware, compose } from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk';

// 同时使用thunk和调试中间件
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(applyMiddleware(thunk),);

const store = createStore(
	reducer, 
	enhancer
);

export default store;

作用：

Redux-thunk是redux的一个中间件。在我们以前书写action的时候，action的返回数据的格式为一个js的对象，但是当我们使用Redux-thunk之后，action的返回数据可以是一个函数，在这个函数中我们可以进行一些逻辑比较复杂的操作，或者发起一个异步请求等。避免直接在容器组件中书写造成代码的混乱。

actionCreator中

export const getTodoListData = () => {
	// 当action返回值为一个函数的时候，这里可以接受一个dispatch
	return (dispatch) => {
		const url = 'http://www.mocky.io/v2/5ba88d043200005f00e2eafb'
		axios.get(url).then((res)=> {
			// 获取到数据之后，还是按照原来的方法触发action改变数据
			const action = initListDataAction(res.data)
			dispatch(action)
		}).catch(()=>{
			alert('HTTP 请求失败！')
		})
	}

}

容器组件TodoList中

componentDidMount(){
		// 这里触发action 执行异步操作去请求数据
		const action = getTodoListData()
		store.dispatch(action)
	}

这样我们就将逻辑代码抽取到action中去了，而不是在容器组件中

https://github.com/rexyan/simple_react/tree/Redux-thunk%E4%B8%AD%E9%97%B4%E4%BB%B6